<template lang="pug">
  el-row
    el-col(:span="24")
      .grid-content.enterprise-certification
        el-form.enterprise-certification-rule-form(:model="enterpriseCertification", :rules="enterpriseCertificationRules", ref="enterpriseCertification", label-width="180px")
          el-form-item.certification-title.certification-state(label="企业认证")
            span 企业认证审核通过后，才可以使用系统功能
            el-button(plain, disabled="disabled") 未认证
          el-form-item.certification-name(label="企业名称", prop="certificationName")
            el-input(v-model="enterpriseCertification.certificationName", placeholder="例如上海永通生态工程股份有限公司", style="width:500px")
          el-form-item.certification-nick-name(label="企业简称", prop="certificationNickName")
            el-input(v-model="enterpriseCertification.certificationNickName", placeholder="例如上海永通生态工程股份有限公司", style="width:500px")
          el-form-item.certification-logo(label="企业logo", prop="certificationLogo")
            el-upload.certification-logo-uploader(action="", :show-file-list="false", :on-success="handleLogoSuccess", :before-upload="beforeLogoUpload")
              img.certification-logo-img(v-if="certificationImageUrl", :src="certificationImageUrl")
              i.el-icon-plus.certification-logo-uploader-icon(v-else)
            .tips
              p LOGO会展示到红包页面，请按照以下建议上传LOGO以达到最佳展示效果：
              p 1.要求宽480像素、高320像素，大小不超过500kB
              p 2.支持PNG、JPG、JPEG
              p 3.裁剪时LOGO左右不留间隙
          el-form-item.billing-title(label="企业开票信息")
            span 请填写正确的开票信息，以便平台为您开具增值税发票
          el-form-item.billing-name(label="企业名称", prop="billingName")
            el-input(v-model="enterpriseCertification.billingName", style="width:500px")
          el-form-item.billing-name(label="税号", prop="billingTax")
            el-input(v-model="enterpriseCertification.billingTax", style="width:500px")
          el-form-item.billing-name(label="企业地址", prop="billingAddres")
            el-input(v-model="enterpriseCertification.billingAddres", style="width:500px")
          el-form-item.billing-name(label="电话号码", prop="billingPhone")
            el-input(v-model="enterpriseCertification.billingPhone", style="width:500px")
          el-form-item.billing-name(label="开户银行", prop="billingBank")
            el-input(v-model="enterpriseCertification.billingBank", placeholder="精确到支行", style="width:500px")
          el-form-item.billing-name(label="银行账号", prop="billingBankNum")
            el-input(v-model="enterpriseCertification.billingBankNum", style="width:500px")
          el-form-item.billing-name(label="企业名称", prop="billingName")
            el-input(v-model="enterpriseCertification.billingName", style="width:500px")
          el-form-item.billing-area(label="发票邮寄地址", prop="selectedBillingAreaOptions", style="width:500px")
            el-cascader(:options="billingAreaOptions", v-model="enterpriseCertification.billingSelectedAreaOptions", v-on:change="billingAreaHandleChange")
            el-input(type="textarea", :rows="2", placeholder="详细地址，精确到门牌号", v-model="enterpriseCertification.billingDetailedAddres")
          el-form-item.billing-submit(style="width:150px")
            el-button.submit(v-on:click="billingSubmitForm('enterpriseCertification')", style="width:150px") 免费认证
</template>

<script>
  export default {
    data() {
      return {
        enterpriseCertification: {
          certificationName: '',
          certificationNickName: '',
          billingName: '',
          billingTax: '',
          billingAddres: '',
          billingPhone: '',
          billingBank: '',
          billingBankNum: '',
          billingSelectedAreaOptions: [],
          billingDetailedAddres: ''
        },
        certificationImageUrl: '',
        billingAreaOptions: [
          {
            value: '江苏省',
            label: '江苏省',
            children: [{
              value: '淮安市',
              label: '淮安市',
              children: [{
                value: '淮阴区',
                label: '淮阴区'
              }, {
                value: '清江浦区',
                label: '清江浦区'
              }]
            }, {
              value: '苏州市',
              label: '苏州市',
              children: [{
                value: '昆山市',
                label: '昆山市'
              }, {
                value: '姑苏区',
                label: '姑苏区'
              }]
            }]
          },
          {
            value: '江苏省',
            label: '江苏省',
            children: [{
              value: '淮安市',
              label: '淮安市',
              children: [{
                value: '淮阴区',
                label: '淮阴区'
              }, {
                value: '清江浦区',
                label: '清江浦区'
              }]
            }, {
              value: '苏州市',
              label: '苏州市',
              children: [{
                value: '昆山市',
                label: '昆山市'
              }, {
                value: '姑苏区',
                label: '姑苏区'
              }]
            }]
          }
          ],
        enterpriseCertificationRules: {
          certificationName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'}
          ],
          certificationNickName: [
            {required: true, message: '请输入企业简称', trigger: 'blur'}
          ],
          certificationLogo: [
            {required: true, message: '请上传企业logo', trigger: 'blur'}
          ],
          billingName: [
            {required: false, message: '请输入企业名称', trigger: 'blur'}
          ],
          billingTax: [
            {required: false, message: '请输入税号', trigger: 'blur'}
          ],
          billingAddres: [
            {required: false, message: '请输入企业地址', trigger: 'blur'}
          ],
          billingPhone: [
            {required: false, message: '请输入电话号码', trigger: 'blur'}
          ],
          billingBank: [
            {required: false, message: '请输入开户银行', trigger: 'blur'}
          ],
          billingBankNum: [
            {required: false, message: '请输入银行账号', trigger: 'blur'}
          ],
          selectedBillingAreaOptions: [
            {required: false, message: '请输入邮寄地址', trigger: 'blur'}
          ]
        }
      }
    },
    mounted: function() {
      this.$nextTick(() => {
        document.querySelector('.el-main').style.background = '#fff';
      });
    },
    methods: {
      handleLogoSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeLogoUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      billingAreaHandleChange(value) {
        console.log(value);
      },
      billingSubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .enterprise-certification {
    .enterprise-certification-rule-form {
      .certification-state {
        .el-form-item__label {
          font-size: 18px;
          font-weight: 800;
        }
        .el-button {
          color: #2a98e5;
          border-color: #2a98e5;
          padding: 5px 15px;
          font-size: 14px;
          font-weight: 600;
          margin-left: 20px;
        }
      }
      .certification-logo {
        .el-form-item__label {
          margin-right: 20px;
          height: 80px;
          line-height: 80px;
          padding-right: 0;
        }
        .certification-logo-uploader {
          .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover {
              border-color: $main-style-red;
            }
          }
          .certification-logo-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 240px;
            height: 80px;
            line-height: 80px;
            text-align: center;
          }
          .certification-logo-img {
            width: 240px;
            height: 80px;
            display: block;
          }
        }
        .el-form-item__content {
          display: block;
          .certification-logo-uploader {
            float: left;
          }
          .tips {
            font-size: 14px;
            margin-left: 20px;
            float: left;
            p {
              padding: 0;
              line-height: 1.5;
              margin: 0 0 0 5px;
              &:first-child {
                margin: 0;
              }
            }
          }
        }
      }
      .billing-title {
        .el-form-item__label {
          font-size: 18px;
          font-weight: 800;
        }
      }
      .billing-area {
        .el-textarea {
          margin-top: 10px;
        }
      }
      .billing-submit {
        .submit {
          background-color: $main-style-red;
          color: #fff;
        }
      }
    }
  }
</style>
